<template>
    <el-dialog v-model="props.dialogFormVisible" width="500" @close="() => {
        $emit('update_dialogFormVisable', false)
    }" :title="props.title">
        <el-form :model="props.Goodsbuy" :rules="rules" ref="BorrowFormRef">
            <el-form-item label="商品ID" :label-width="formLabelWidth" prop="goods_id">
                <el-input v-model="props.Goodsbuy.goods_id" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品名" :label-width="formLabelWidth" prop="goods_name">
                <el-input v-model="props.Goodsbuy.goods_name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="user_name">
                <el-input v-model="props.Goodsbuy.user_name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="props.Goodsbuy.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="props.Goodsbuy.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
                <el-input v-model="props.Goodsbuy.address" autocomplete="off" />
            </el-form-item>
            
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleError()">取消</el-button>
                <el-button type="primary" @click="handlePrimary(props.title, BorrowFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { addBorrowApi, updateBorrowApi } from '@/api/common';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref, } from 'vue'
const props = defineProps({
    dialogFormVisible: {
        required: true
    },
    Goodsbuy: {
        required: true,
        type: Object
    },
    title: {
        required: true,
        type: String
    }
})
const emit = defineEmits(['update_dialogFormVisable'])
const formLabelWidth = ref("120px");
const BorrowFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    goods_id: [
        { required: true, message: '请输入商品ID', trigger: 'blur' },
    ],
    goods_name: [
        { required: true, message: '请输入商品名', trigger: 'blur' },
    ],
    user_name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入电话', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入地址', trigger: 'blur' },
    ],
})

const handlePrimary = async (title: string, formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (title == '修改借阅信息') {
                updateBorrowApi({
                    borrow_id: props.Goodsbuy.borrow_id,
                    book_id: props.Goodsbuy.book_id,
                    user_id: props.Goodsbuy.user_id,
                    borrow_date: props.Goodsbuy.borrow_date,
                    return_date: props.Goodsbuy.return_date,
                    status: props.Goodsbuy.status
                }).then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success('修改成功！')
                    } else {
                        ElMessage.error('修改失败！')
                    }
                }).catch(err => {
                    ElMessage.error('服务器错误！')
                })
            }
            if (title == '新增借阅信息'|| title == '请确认购买信息') {
                addBorrowApi({
                    borrow_id: props.Goodsbuy.borrow_id,
                    book_id: props.Goodsbuy.book_id,
                    user_id: props.Goodsbuy.user_id,
                    borrow_date: props.Goodsbuy.borrow_date,
                    return_date: props.Goodsbuy.return_date,
                    status: props.Goodsbuy.status
                }).then(res => {
                    if (res.data.code == 200) {
                        if(title == '新增借阅信息'){
                            ElMessage.success('添加成功！')
                        }
                        else{
                            ElMessage.success('购买成功！')
                        }
                    } else {
                        if(title == '新增借阅信息'){
                            ElMessage.error('添加失败！')
                        }
                        else{
                            ElMessage.success('购买失败！')
                        }
                        
                    }
                }).catch(err => {
                    console.log(err)
                    ElMessage.error('服务器错误！')
                })
            }
            emit('update_dialogFormVisable', false)
        }
    })
}
const handleError = () => {
    emit('update_dialogFormVisable', false)
}
</script>

<style></style>